<template>
  <div class="publish-story container">
    <el-card class="publish-card">
      <h2>发布故事</h2>
      <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入故事标题" />
        </el-form-item>
        <el-form-item label="分类" prop="category">
          <el-select v-model="form.category" placeholder="请选择分类">
            <el-option label="自然风光" value="自然风光" />
            <el-option label="历史文化" value="历史文化" />
            <el-option label="美食指南" value="美食指南" />
            <el-option label="摄影技巧" value="摄影技巧" />
            <el-option label="生活方式" value="生活方式" />
          </el-select>
        </el-form-item>
        <el-form-item label="封面" prop="coverImage">
          <el-upload
            class="cover-uploader"
            action="#"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="handleCoverChange"
          >
            <img v-if="form.coverImageUrl" :src="form.coverImageUrl" class="cover-preview" />
            <el-button v-else type="primary">上传封面</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model="form.content" type="textarea" :rows="10" placeholder="请输入故事内容" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handlePublish" :loading="publishing">发布故事</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { publishStory } from '@/api/story';
const router = useRouter();
const currentUser = ref(JSON.parse(localStorage.getItem('user')) || {});
const formRef = ref(null);
const form = ref({
  title: '',
  category: '',
  coverImage: '',
  coverImageUrl: '',
  content: ''
});
const rules = {
  title: [
    { required: true, message: '请输入标题', trigger: 'blur' },
    { min: 3, max: 50, message: '标题长度3-50', trigger: 'blur' }
  ],
  category: [
    { required: true, message: '请选择分类', trigger: 'change' }
  ],
  content: [
    { required: true, message: '请输入内容', trigger: 'blur' },
    { min: 10, message: '内容不少于10字', trigger: 'blur' }
  ]
};
const publishing = ref(false);
const handleCoverChange = (file) => {
  const reader = new FileReader();
  reader.onload = e => {
    form.value.coverImageUrl = e.target.result;
    form.value.coverImage = file.raw;
  };
  reader.readAsDataURL(file.raw);
};
const handlePublish = async () => {
  if (!currentUser.value.id) {
    ElMessage.warning('请先登录');
    router.push('/login');
    return;
  }
  await formRef.value.validate(async (valid) => {
    if (!valid) return;
    publishing.value = true;
    try {
      // 这里只做演示，实际应上传图片到服务器，拿到url
      const coverImageUrl = form.value.coverImageUrl || '';
      const res = await publishStory({
        title: form.value.title,
        category: form.value.category,
        coverImage: coverImageUrl,
        content: form.value.content,
        authorId: currentUser.value.id
      });
      if (res.data && res.data.code === 200) {
        ElMessage.success('发布成功');
        router.push('/stories');
      } else {
        ElMessage.error(res.data?.msg || '发布失败');
      }
    } catch (e) {
      ElMessage.error('发布失败');
    } finally {
      publishing.value = false;
    }
  });
};
</script>

<style scoped>
.publish-story { max-width: 600px; margin: 40px auto; }
.publish-card { padding: 32px 24px; }
.cover-preview { width: 100%; max-width: 320px; border-radius: 8px; margin-bottom: 8px; }
</style> 